🧠 Sale Coach V4 — Interactive Sales Training Deck

By: Vincent Markesino | Styled for freedialer.net

⚙️ Core System

Single-File Engine: Runs entirely in one HTML file (inline JS + CSS).

Offline-Ready: Works without servers or external libraries.

Auto-Resizing: Embedding-safe — posts height to iframe parent to avoid scrollbars or leaks.

Lightweight: <1 MB total footprint for fast load and instant interaction.

🎴 Flashcard + Lesson Hybrid

Dual-Mode Cards: Each item flips between objection response and lesson.

3D Flip Animation: Smooth perspective rotation on hover or button press.

Dynamic Labeling: Front shows title/type; back shows full lesson or answer with progress bar.

80+ Pre-Loaded Cards: ~45 objection handlers + 40+ micro-lessons covering discovery, framing, pricing, follow-up, closing, etc.

🔊 Voice & Language System

Integrated Text-to-Speech (TTS): Uses browser speech synthesis to read lessons aloud.

Voice Selector: Auto-detects all installed voices; can pick female, male, or language-specific ones.

Language Toggle (EN ↔ ES): Instantly switches text and UI labels between English and Spanish.

Import Tool: Upload custom translations via pipe-delimited TXT (id|type|title_en|body_en|title_es|body_es).

🧩 Interactive Controls

Prev / Next / Flip / Play Buttons: Navigate and interact fluidly without reloading.

Sound On/Off Toggle: Mutes or enables TTS globally with persistent label updates.

Progress Bar: Tracks TTS playback or lesson time dynamically (fills from 0–100 %).

KPI Tracker: Displays “current / total · remaining left” counter for visible progress.

🌐 User Interface

Responsive Layout: Scales neatly up to 1080 px width, mobile-safe.

Adaptive Color System:

Background — radial gradient mix of brand red (#ff3b30) and accent blue (#40c9ff).

Foreground — glass-style panels with soft depth shadows (--ring).

Accessible Font Choices: System-UI stack with high contrast text.

Tooltip-style Labels: Each control is clearly titled and localized.

Footer Credits: Timestamped update + author signature baked into UI.

💬 Content Types

Objection Responses: Empathetic reframes for 40+ common sales pushbacks (budget, timing, trust, vendor loyalty, etc.).

Micro-Lessons: Bite-sized practical coaching topics such as Agenda Setting, Framing ROI, Story Beats, Negotiation Basics, Closing, and Daily Practice.

Behavioral Focus: Encourages calm confidence, curiosity, and professionalism — not pressure.

🧩 Integrations & Embedding

Auto-Height Messaging: Sends postMessage {fdEmbed:true,height:H} to parent for smooth GoDaddy / iframe embeds.

No External Dependencies: All assets are inline; works in restricted HTML containers.

Embeddable Wrapper Provided: Can be placed inside GoDaddy builder with zero scroll or bleed.

🧰 Customization Potential

Extend card data easily by appending JSON items.

Replace voice / language packs for brand-specific training.

Can serve as a front-end “micro-LMS” or internal coaching module.

The same system architecture supports CSV lesson imports for future scaling.